<!DOCTYPE html>
<html >
<head>

			<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
	
<script>require(["dojo/parser", "dijit/MenuBar", "dijit/MenuBarItem", "dijit/PopupMenuBarItem",
    "dijit/DropDownMenu", "dijit/MenuItem"]);</script>
</head>
<body class="claro">
    <div data-dojo-type="dijit/MenuBar" id="navMenu">
    <div data-dojo-type="dijit/PopupMenuBarItem">
        <span>File</span>
        <div data-dojo-type="dijit/DropDownMenu" id="fileMenu">
            <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('file 1');}">File #1</div>
            <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('file 2');}">File #2</div>
        </div>
    </div>
    <div data-dojo-type="dijit/PopupMenuBarItem">
        <span>Edit</span>
        <div data-dojo-type="dijit/DropDownMenu" id="editMenu">
                            <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut',
                                    onClick:function(){alert('cut!')}">Cut</div>
                            <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy',
                                    onClick:function(){alert('copy!')}">Copy</div>
                            <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste',
                                    onClick:function(){alert('paste!')}">Paste</div>
        </div>
    </div>
    <div data-dojo-type="dijit/MenuBarItem">
            Save
    </div>
</div>
</body>
</html>

